import React, { PureComponent } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import screen from '../../../../../utils/screen'

const borderColor = '#BCBCBC'

export default class extends PureComponent {
  renderTopLeft = () => {
    const { topLeft, leftTop } = this.props;
    if(topLeft && leftTop) {
      return (
        <View style={{flex: 1, borderTopWidth: screen.pxToDp(1), borderTopColor: borderColor, borderLeftWidth: screen.pxToDp(1), borderLeftColor: borderColor}} />
      )
    }
    if(topLeft) {
      return (
        <View style={{flex: 1, borderTopWidth: screen.pxToDp(1), borderTopColor: borderColor}} />
      )
    }
    if(leftTop) {
      return (
        <View style={{flex: 1, borderLeftWidth: screen.pxToDp(1), borderLeftColor: borderColor}} />
      )
    }
    return (
      <View style={{flex: 1}} />
    )
  }
  renderTopCenter = () => {
    const { topCenter } = this.props;
    return topCenter && (
      <View style={{width: screen.pxToDp(1), backgroundColor: borderColor}} />
    ) || (
      <View style={{width: screen.pxToDp(1)}} />
    )
  }
  renderTopRight = () => {
    const { topRight, rightTop } = this.props;
    if(topRight && rightTop) {
      return (
        <View style={{flex: 1, borderTopWidth: screen.pxToDp(1), borderTopColor: borderColor, borderRightWidth: screen.pxToDp(1), borderRightColor: borderColor}} />
      )
    }
    if(topRight) {
      return (
        <View style={{flex: 1, borderTopWidth: screen.pxToDp(1), borderTopColor: borderColor}} />
      )
    }
    if(rightTop) {
      return (
        <View style={{flex: 1, borderRightWidth: screen.pxToDp(1), borderRightColor: borderColor}} />
      )
    }
    return (
      <View style={{flex: 1}} />
    )
  }
  renderBottomLeft = () => {
    const { bottomLeft, leftBottom, leftTwoBottom } = this.props;
    if(bottomLeft && leftBottom) {
      return (
        <View style={{flex: 1, borderBottomWidth: screen.pxToDp(1), borderBottomColor: borderColor, borderLeftWidth: screen.pxToDp(1), borderLeftColor: borderColor}} />
      )
    }
    if(bottomLeft) {
      return (
        <View style={{flex: 1, borderBottomWidth: screen.pxToDp(1), borderBottomColor: borderColor}} />
      )
    }
    if(leftBottom || leftTwoBottom) {
      return (
        <View style={{flex: 1, borderLeftWidth: screen.pxToDp(1), borderLeftColor: borderColor}} />
      )
    }
    return (
      <View style={{flex: 1}} />
    )
  }
  renderBottomCenter = () => {
    const { bottomCenter } = this.props;
    return bottomCenter && (
      <View style={{width: screen.pxToDp(1), backgroundColor: borderColor}} />
    ) || (
      <View style={{width: screen.pxToDp(1)}} />
    )
  }
  renderBottomRight = () => {
    const { bottomRight, rightBottom } = this.props;
    if(bottomRight && rightBottom) {
      return (
        <View style={{flex: 1, borderBottomWidth: screen.pxToDp(1), borderBottomColor: borderColor, borderRightWidth: screen.pxToDp(1), borderRightColor: borderColor}} />
      )
    }
    if(bottomRight) {
      return (
        <View style={{flex: 1, borderBottomWidth: screen.pxToDp(1), borderBottomColor: borderColor}} />
      )
    }
    if(rightBottom) {
      return (
        <View style={{flex: 1, borderRightWidth: screen.pxToDp(1), borderRightColor: borderColor}} />
      )
    }
    return (
      <View style={{flex: 1}} />
    )
  }
  renderLeftTop = () => {
    const { leftTop } = this.props;
    if(leftTop) {
      return (
        <View style={{flex: 1, borderLeftWidth: screen.pxToDp(1), borderLeftColor: borderColor}} />
      )
    }
    return (
      <View style={{flex: 1}}></View>
    )
  }
  renderLeftCenter = () => {
    const { leftCenter } = this.props;
    if(leftCenter) {
      return (
        <View style={{height: screen.pxToDp(1), backgroundColor: borderColor}} />
      )
    }
    return (
      <View style={{height: screen.pxToDp(1)}} />
    )
  }
  renderLeftBottom = () => {
    const { leftBottom } = this.props;
    if(leftBottom) {
      return (
        <View style={{flex: 1, borderLeftWidth: screen.pxToDp(1), borderLeftColor: borderColor}}></View>
      )
    }
    return (
      <View style={{flex: 1}} />
    )
  }

  renderLeftTwoBottom = () => {
    const { leftTwoBottom } = this.props;
    if( leftTwoBottom ) {
      return (
        <View style={{flex: 1}}>
          <View style={{flex: 1}}></View>
          <View style={{height: screen.pxToDp(1), backgroundColor: borderColor}} />
          <View style={{flex: 1, borderLeftWidth: screen.pxToDp(1), borderLeftColor: borderColor}}></View>
        </View>
      )
    }
  }

  renderRightTop = () => {
    const { rightTop } = this.props;
    if(rightTop) {
      return (
        <View style={{flex: 1, borderRightWidth: screen.pxToDp(1), borderRightColor: borderColor}} />
      )
    }
    return (
      <View style={{flex: 1}}></View>
    )
  }
  renderRightCenter = () => {
    const { rightCenter } = this.props;
    if(rightCenter) {
      return (
        <View style={{height: screen.pxToDp(1), backgroundColor: borderColor}} />
      )
    }
    return (
      <View style={{height: screen.pxToDp(1)}} />
    )
  }
  renderRightBottom = () => {
    const { rightBottom } = this.props;
    if(rightBottom) {
      return (
        <View style={{flex: 1, borderRightWidth: screen.pxToDp(1), borderRightColor: borderColor}} />
      )
    }
    return (
      <View style={{flex: 1}}></View>
    )
  }
  renderCenter = () => {
    const { center, centerTopText,centerTopColor, innerVal } = this.props;
    const { top, bottom } = innerVal || {}
    if(center) {
      return (
        <View style={styles.cellCenter}>
          <View style={{paddingHorizontal: screen.pxToDp(4), paddingVertical: screen.pxToDp(8), backgroundColor: centerTopColor || 'red', flexDirection: 'row', justifyContent: 'space-between'}}>
            <Text style={{fontSize: screen.pxToDp(20), color: 'white'}}>{centerTopText}</Text>
            <Text style={{fontSize: screen.pxToDp(20), color: 'white'}}>{top}</Text>
          </View>
          <View style={{flex: 1, backgroundColor: '#F0F0F2', justifyContent: 'center', alignItems: 'center'}}>
            <Text>{bottom}</Text>
          </View>
        </View>
      )
    } else {
      return (
        <View style={{flex: 1}}></View>
      )
    }
  }
  renderCenterTop = () => {

  }
  render() {
    const { topLeft, topCenter, topRight, bottomLeft, bottomCenter, bottomRight, leftTop, leftCenter,leftBottom, rightTop, rightCenter, rightBottom } = this.props;
    return (
      <View style={styles.cell}>
        <View style={styles.cellTop}>
          {
            this.renderTopLeft()
          }
          {
            this.renderTopCenter()
          }
          {
            this.renderTopRight()
          }
        </View>
        <View style={styles.cellMiddle}>
          <View style={styles.cellLeft}>
            {
              this.renderLeftTop()
            }
            {
              this.renderLeftCenter()
            }
            {
              this.renderLeftBottom()
            }
            {
              this.renderLeftTwoBottom()
            }
          </View>
          <View style={{flex: 1}}>
            {
              this.renderCenter()
            }
          </View>
          <View style={styles.cellRight}>
            {
              this.renderRightTop()
            }
            {
              this.renderRightCenter()
            }
            {
              this.renderRightBottom()
            }
          </View>
        </View>
        <View style={styles.cellBottom}>
          {
            this.renderBottomLeft()
          }
          {
            this.renderBottomCenter()
          }
          {
            this.renderBottomRight()
          }
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  cell: {
    width: screen.pxToDp(240)
  },
  cellTop: {
    height: screen.pxToDp(20),
    flexDirection: 'row',
    justifyContent: 'center',
  },
  cellMiddle: {
    height: screen.pxToDp(130),
    flexDirection: 'row'
  },
  cellBottom: {
    height: screen.pxToDp(20),
    flexDirection: 'row',
    justifyContent: 'center',

  },
  cellLeft: {
    justifyContent: 'center',
    width: screen.pxToDp(20),
  },
  cellCenter: {
    flex: 1,
    borderColor: borderColor,
    borderWidth: screen.pxToDp(1)
  },
  cellRight: {
    justifyContent: 'center',
    width: screen.pxToDp(20),
  }
})
